<template>
    <div class="problem">
        <div class="title">问题交办</div>
        <div class="contain">
            <div class="con" v-for="(item) in Datas" :key="item.index">
                <img src="@/assets/images/15.png" alt="">
                <div>{{ item.name }}</div>
                <div style="color:#01fb8f">{{ item.value }}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:['resData'],
        data(){
            return{
                Datas:[],
            }
        },
        watch:{
            resData(res){
                let data = res.data.问题交办数据
                this.Datas = data.map((item, index) => {
                    return {...item, ...res.data.问题交办数据[index]};
                });
            }
        },
    }
</script>

<style lang="less" scoped>
.title {
    width: 1.2688rem;
    height: .3679rem;
    color: #fff;
    font-weight: bold;
    font-size: .2083rem;
    background: url('@/assets/images/16.png') no-repeat bottom right;
}

.contain {
    width: 2.4125rem;
    height: 2.1642rem;
    margin: 0 auto;
    margin-top: 0.1125rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .con {
        width: .9358rem;
        height: .9358rem;
        background: url('@/assets/images/14.png') no-repeat center;
        background-size: contain;
        text-align: center;
        color: #2fa4ff;
        font-size: .1042rem;

        img {
            width: .2729rem;
            height: .2729rem;
            margin-top: .1042rem;
        }
    }
}
</style>
